<!--搜索词详情 -->
<template>
  <el-dialog :visible.sync="dialogTableVisible" width="800px" style="margin-bottom: 24px;" @close="handleClose" @open="handlerOpen">
    <div slot="title" class="webfont-Medium" style="font-size: 16px;">搜索词详情</div>

    <div class="search-head flex">
      <div class="head-item">
        <div class="sec">搜索词</div>
        <div class="info">
          <span>{{ searInfo.searchTermText }}</span>
          <em v-if="searInfo.matchType">{{ searInfo.matchType==='BROAD'?'模糊匹配':'精准匹配' }}</em>
        </div>
      </div>

      <div class="head-item">
        <div class="sec">默认每次点击费用出价</div>
        <div class="info">
          <span>{{ searInfo.bidCurrency==="RMB"?'￥':'$' }}{{ searInfo.bidAmount|$toFixed(2) }}</span>
        </div>
      </div>
      <div class="head-item">
        <div class="sec">匹配来源</div>
        <div class="info">
          <span>{{ searInfo.searchTermSource==='TARGETED'?'关键词':'搜索匹配' }}</span>
        </div>
      </div>
      <div v-if="searInfo.searchTermSource==='TARGETED'" class="head-item">
        <div class="sec">关键词</div>
        <div class="info">
          <span>{{ searInfo.keyword }}</span>
        </div>
      </div>
    </div>

    <!-- 核心指标开始 -->
    <div class="core-box">
      <cellHeader title="核心指标" style="color: #000000;">
        <span slot="sec" style="font-size:14px ;color: rgba(51, 64, 74, 0.8);" class="webfont-Regular">(时区{{ $store.state.user.timeZone==="UTC"?'UTC':'亚洲/上海' }})</span>
        <!-- <choose-time /> -->
        <el-date-picker
          v-model="timeArrValue"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          style="width: 220px;"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="handleTimeChange"
        />
      </cellHeader>

      <el-row class="core-list" type="flex" style="flex-wrap: wrap; flex-direction: row">
        <el-col v-for="(item,index) in echartsOptions" :key="index" :span="6" class="core-item">
          <div class="item-title">{{ item.name }}</div>
          <countTo
            :start-val="0"
            :end-val="(item.val==='ttr'||item.val==='conversionRate')?searData.now[item.val]*100:searData.now[item.val]"
            :duration="1500"
            class="item-num"
            :decimals=" 2"
          />
          <div class="item-footer">
            <!-- 日均 -->
            <p v-if="index<4" class="item-average">
              <el-tooltip class="item" effect="dark" :content="timeArrValue[0]+'至'+timeArrValue[1]+'的日均值'" placement="top">
                <span class="sec pointer ">日均{{ item.name }}</span>
              </el-tooltip>
              <span class="num">{{ average(searData.now[item.val],searData.result) }}</span>
            </p>

            <p class="ring">
              <huang-bi :new-val="searData.now[item.val]*1" :old-val="searData.old[item.val]*1" title="环比" :content="'对比'+lastCycle[0]+'至'+lastCycle[1]"></huang-bi>
            </p>

            <!-- 日环比 -->
            <!-- <p v-if="index>=4&&dayRingShow()" class="day">
              <huang-bi
                :new-val="searData.yesterday[item.val]*1"
                :old-val="searData.dayBeforeYesterday[item.val]*1"
                title="日环比"
                :content="'昨日对比'+beforeYesterday"
              ></huang-bi>

            </p> -->

          </div>

        </el-col>
      </el-row>

    </div>

    <!-- 核心指标开始 -->

    <!--趋势对比开始  -->
    <div class="trend-box">

      <cell-header title="趋势对比" />
      <el-radio-group v-if="false" v-model="queryData.type" size="small" style="margin-bottom: 14px;" @change="findReportKeywordTotalBySearch">
        <el-radio-button label="DAILY">每天</el-radio-button>
        <!-- <el-radio-button label="HOURLY">每小时</el-radio-button> -->
      </el-radio-group>
      <dateEchart :date-info="searData.result" :id-name="idName" />
    </div>
    <!--趋势对比结束开始  -->
  </el-dialog>
</template>
<script>
import cellHeader from '@/components/cell-header.vue'
// import chooseTime from '@/views/ad/overview/components/chooseTime/index.vue'
import countTo from 'vue-count-to'
import huangBi from '@/components/huangBi/index.vue'
import dateEchart from '@/components/charts/dateEchart.vue'
import {
  getsLastPeriod,
  getBeforeYes,
  includeTime
} from '@/utils/moment.js'
import {
  findReportSearchTermTotal
} from '@/api/keyWord.js'

import {
  echartsOptions
} from '@/settings.js'
import {
  returnRing,
  returnAverage
} from '@/utils/index.js'
  // import
export default {
  name: '', // ·������
  components: {
    cellHeader,
    countTo,
    dateEchart,
    huangBi

    // chooseTime
  },
  props: {
    show1: {
      type: Boolean,
      default: false
    },
    info: {
      type: Object,
      default: function() {
        return {}
      }
    }
    // unit: {
    //   type: String,
    //   default: function() {
    //     return this.$store.state.user.unit
    //   }
    // }

  },

  data() {
    return {
      idName: 'idName',
      pickerOptions: { // 时间选择器的限制
        disabledDate(time) {
          // 不能选择今天之后的日期；
          return time.getTime() > Date.now()
        }
      },
      searInfo: {},
      searData: {},
      dialogTableVisible: false,
      timeArrValue: [this.$store.state.overview.timeObj.overViewTime.startTime, this.$store.state.overview.timeObj.overViewTime
        .endTime
      ],
      queryData: {
        teamId: this.$store.state.team.teamId || '',
        currencyType: this.unit,
        adGroupId: this.$route.query.adGroupId || this.searInfo.keywordId || '',
        campaignId: this.$route.query.campaignId,
        orgId: this.$route.query.orgId || '',
        uuid: this.$route.query.uuid || '',
        aId: this.$route.query.aId || this.$route.query.aid || '',
        countrySX: this.$store.state.user.timeZone, // 时区
        timeZone: this.$store.getters.timeZoneTime, // 时区比UTC时间少几个小时
        type: 'DAILY',
        startTime: undefined,
        endTime: undefined

      }
    }
  },
  computed: {
    unit() {
      return this.$store.state.user.unit
    },
    echartsOptions() {
      const arr = echartsOptions.map(item => {
        if (item.val === 'avgCptAmount' && this.adchannelType === 'DISPLAY') {
          return {
            name: 'CPM',
            val: 'avgCpmAmount',
            fix: '$'
          }
        } else {
          return item
        }
      })

      return arr
    },
    // 选择的开始时间与结束时间
    timeObj() {
      return this.$store.state.overview.timeObj.overViewTime
    },
    unitTxt() {
      if (this.unit === 'RMB') return '￥'
      return '$'
    },
    // 上个周期的值
    lastCycle() {
      const that = this
      if (this.timeArr.length) {
        return getsLastPeriod(this.timeArr)
      }
    },
    beforeYesterday() {
      return getBeforeYes()
    }

  },
  watch: {
    show1: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        this.dialogTableVisible = newV
      }
    },
    info: {
      deep: true,
      // immediate: true,
      handler: function(newV, oldV) {
        this.searInfo = newV
        this.findReportSearchTermTotal()
      }
    },
    timeObj: {
      deep: true, // ���ȼ�������Ϊ true
      // immediate: true,
      handler: function(newV, oldV) {
        this.timeArrValue = [newV.startTime, newV.endTime]
        this.queryData.startTime = newV.startTime
        this.queryData.endTime = newV.endTime
      }
    }
  },
  // ������
  created() {
    this.idName = 'idName' + new Date().getTime()
  },
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    // 弹窗打开触发函数
    handlerOpen() {
      this.timeArrValue = [this.timeObj.startTime, this.timeObj.endTime]
      this.queryData.startTime = this.timeObj.startTime
      this.queryData.endTime = this.timeObj.endTime
      this.findReportSearchTermTotal()
    },
    dayRingShow() {
      return includeTime(this.timeArr[1])
    },
    // 计算环比
    ring(now, old) {
      const res = returnRing(now, old)
      return (res * 1).toFixed(2)
    },

    // 计算平均值
    average(num, list) {
      const res = returnAverage(num, list)
      return (res * 1).toFixed(2)
    },
    handleClose() {
      this.$emit('update:show1', false)
    },
    handleTimeChange(data) {
      this.queryData.startTime = data[0]
      this.queryData.endTime = data[1]
      this.findReportSearchTermTotal()
    },
    async findReportSearchTermTotal() {
      if (!this.queryData.startTime || !this.queryData.endTime) return false
      const obj = {
        ...this.queryData,
        teamId: this.$store.state.team.teamId || '',
        adGroupId: this.$route.query.adGroupId || this.searInfo.adGroupId || '',
        countrySX: this.$store.state.user.timeZone, // 时区
        timeZone: this.$store.getters.timeZoneTime // 时区比UTC时间少几个小时
      }
      obj.keyword = this.searInfo.searchTermText
      obj.keywordId = this.searInfo.keywordId
      const res = await findReportSearchTermTotal(obj)
      if (res.data.code === 20000) {
        const data = res.data.data
        this.searData = data
      }
    }

  }
}
</script>

<style scoped lang="scss">
  .search-head {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(57, 68, 78, 0.1);
    ;
    margin-bottom: 24px;

    .head-item {

      .sec {
        font-size: 14px;
        line-height: 18px;
        /* identical to box height, or 129% */

        /* 此文颜色 */

        color: rgba(51, 64, 74, 0.8);
      }

      .info {
        span {
          font-size: 24px;
          line-height: 46px;
          /* identical to box height, or 192% */

          color: #000000;
        }

        em {
          font-size: 14px;
          line-height: 18px;
          padding-left: 14px;
        }
      }
    }
  }

  .core-box {
    border-bottom: 1px solid rgba(57, 68, 78, 0.1);
    margin-bottom: 32px;

    .core-list {
      margin-left: -24px;
      .core-item {
        margin-bottom: 42px;
        padding-left: 24px;
        border-right: 1px solid rgba(57, 68, 78, 0.1);
        ;

        &:nth-of-type(4n) {
          border: none;
        }

        .item-title {
          font-size: 14px;
          line-height: 18px;
          /* identical to box height, or 129% */
          /* 此文颜色 */
          color: rgba(51, 64, 74, 0.8);
        }

        .item-num {
          padding-top: 4px;
          font-size: 24px;
          line-height: 46px;
          /* identical to box height, or 192% */
          /* 正文颜色 */
          color: #39444E;
		  font-family: "PingFangSC-Medium", PingFangSC, sans-serif !important;
        }

        .item-footer {
          p {
            &:first-of-type {
              padding: 8px 0;
            }

            span {
              font-size: 12px;
              line-height: 16px;
            }

            .sec {
              color: #ACB6C2;
              margin-right: 12px;
            }

            .hong,
            .liu {
              color: #F31A25;
              margin-left: 12px;
            }

            .liu {
              color: #52C31C;
            }

          }
        }

      }
    }
  }

  .core-box /deep/ .el-range-editor--small .el-range__close-icon, .el-range-editor--small .el-range__icon{
    display: none;
  }
</style>
